<script setup>
// import { ref } from 'vue';
import axios from 'axios';
import { ref,computed} from 'vue';
const students = ref([
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' }
    ]);

let length1 = ref(0);
let length2 = ref(0);
let length3 = ref(0);
let avelength = computed(() => {
      return ((length1.value + length2.value + length3.value) / 3).toFixed(2);
    });
let outerMax1 = ref(0);
let outerMax2 = ref(0);
let outerMax3 = ref(0);
let aveoutermax = computed(() => {
      return ((outerMax1.value + outerMax2.value + outerMax3.value) / 3).toFixed(2);
    });
let outerMin1 = ref(0);
let outerMin2 = ref(0);
let outerMin3 = ref(0);
let aveoutermin = computed(() => {
      return ((outerMin1.value + outerMin2.value + outerMin3.value) / 3).toFixed(2);
    });
let initDefect1 = computed(() => {
      return rangeInitDefect(((outerMax1.value -outerMin1.value) / 4).toFixed(2));
    });
let initDefect2 = computed(() => {
      return rangeInitDefect(((outerMax2.value -outerMin2.value) / 4).toFixed(2));
    });
let initDefect3 = computed(() => {
      return rangeInitDefect(((outerMax3.value -outerMin3.value) / 4).toFixed(2));
    });
let aveinitdefect = computed(() => {
  return rangeInitDefect(((parseFloat(initDefect1.value) + parseFloat(initDefect2.value) + parseFloat(initDefect3.value)) / 3).toFixed(2));
});
let wallThick1 = ref(0);
let wallThick2 = ref(0);
let wallThick3 = ref(0);
let avewallthick = computed(() => {
  return ((parseFloat(wallThick1.value) + parseFloat(wallThick2.value) + parseFloat(wallThick3.value)) / 3).toFixed(2);
});

/**
 * 限定初始范围
 * 如果大于0.5取0.5
 * 如果小于0.1取0.1
 */
function rangeInitDefect(initDefect) {
  if (initDefect < 0.01) return 0.01;
  if (initDefect > 0.05) return 0.05;
  return initDefect
}

const finish = async () => {
      // 提取五个学号
      const studentNumbers = students.value.map(student => student.stuNo);
      console.log(studentNumbers)

      // 构建参数对象
      // const dataToSubmit = {
      //   stuNos: JSON.parse(studentNumbers),
      // };

      try {
        // 发送请求并传递参数对象
        const response = await axios.post('api/administrator/finshWaiyaExp', studentNumbers);
        if (response.data.code === 1) {
          console.log(response.data);
          alert(response.data.data);
            // console.log(students) 
        } else {
          alert(response.data.msg);
        }
        
      } catch (error) {
        console.error(error);
        alert('结束实验失败：发生错误');
      }
    };

const confirm = async () => {
      // 提取五个学号
      const studentNumbers = students.value.map(student => student.stuNo);
      // console.log(studentNumbers)

      // 构建参数对象
      const dataToSubmit = {
        stuNos: studentNumbers,
        length1: length1.value,
        length2: length2.value,
        length3: length3.value,
        avelength: avelength.value,
        outerMax1: outerMax1.value,
        outerMax2: outerMax2.value,
        outerMax3: outerMax3.value,
        aveoutermax: aveoutermax.value,
        outerMin1: outerMin1.value,
        outerMin2: outerMin2.value,
        outerMin3: outerMin3.value,
        aveoutermin: aveoutermin.value,
        wallThick1: wallThick1.value,
        wallThick2: wallThick2.value,
        wallThick3: wallThick3.value,
        avewallthick: avewallthick.value,
        initDefect1: initDefect1.value,
        initDefect2: initDefect2.value,
        initDefect3: initDefect3.value,
        aveinitdefect: aveinitdefect.value,
      };

      try {
        // 发送请求并传递参数对象
        const response = await axios.post('api/administrator/confirmWaiya', dataToSubmit);
        if (response.data.code === 1) {
          console.log("response.data: ",response.data);
          alert(response.data.data);
            // console.log(students) 
        } else {
          alert(response.data.msg);
        }
        
      } catch (error) {
        console.error(error);
        alert('确认失败：发生错误');
      }
    };

const getStudents = async()=>{
    try {
        // 发送登录请求
        const response = await axios.get('api/administrator/updateWaiyagroup');
        if (response.data.code === 1) {
          const newData = response.data.data;
            console.log("newData: ",newData)
          // 更新学生数组循环
          for (let i = 0; i < 5; i++) {
            if (i < newData.length) {
              students.value[i] = newData[i];
            } else {
              students.value[i] = { stuNo: '', name: '', classNo: '' };
            }
          }
        } else {
          alert(response.data.msg);
        }
      } 
      catch (error) {
        console.error(error);
        // 处理其他错误情况
        alert('获取学生信息失败：发生错误');
      }
}
</script>

<template>
  <div class="page flex-column">
    <div class="top flex-row">
      <div class="top-left">
        <table>
              <tr>
                  <td colspan="3" class="th-style">实验小组人员</td>
              </tr>
              <tr>
                  <td>学号</td><td>姓名</td><td>班级</td>
              </tr> 
              <tr v-for="student in students" :key="student.id">
                  <td>{{ student.stuNo }}</td>
                  <td>{{ student.name }}</td>
                  <td>{{ student.classNo }}</td>
              </tr>
              <!-- <tr>
                  <td></td><td></td><td></td>
              </tr>
              <tr>
                  <td></td><td></td><td></td>
              </tr> 
              <tr>
                  <td></td><td></td><td></td>
              </tr> 
              <tr>
                  <td ></td><td></td><td></td>
              </tr>  -->
          </table>
      </div>
      <div class="top-right flex-column">
        <div class="top-right1">
          外压实验控制面板
        </div>
        <div class="top-right2 top-right-font">
          ①	请老师测量并输入试件数据，输入完毕后点击“确认”，学生端方可开始实验。
        </div>
        <div class="top-right3 top-right-font">
          ②	待实验完毕后，请老师点击“结束实验”，提醒学生实验结束，下载实验数据。
        </div>
        <div class="top-right4 top-right-font">
          ③	待本组实验人员完成试验后，点击“小组更新”，进行下一组实验人员的控制。
        </div>
      </div>
    </div>
    <div class="bottom flex-column">
      <div class="bottom-table flex-row">
        <table class="bt">
              <tr class="btr">
                  <td>次数</td><td>长度</td><td>外径DoMax</td><td>外径DoMin</td><td>壁厚t</td><td>初始缺陷</td>
              </tr>
              <tr class="btr">
                <td>1</td>
                <td><input type="text" v-model.number="length1" class="custom-input"></td>
                <td><input type="text" v-model.number="outerMax1" class="custom-input"></td>
                <td><input type="text" v-model.number="outerMin1" class="custom-input"></td>
                <td><input type="text" v-model.number="wallThick1" class="custom-input"></td>
                <td><input type="text" v-model.number="initDefect1" class="custom-input"></td>
              </tr> 
              <tr class="btr">
                <td>2</td>
                <td><input type="text" v-model.number="length2" class="custom-input"></td>
                <td><input type="text" v-model.number="outerMax2" class="custom-input"></td>
                <td><input type="text" v-model.number="outerMin2" class="custom-input"></td>
                <td><input type="text" v-model.number="wallThick2" class="custom-input"></td>
                <td><input type="text" v-model.number="initDefect2" class="custom-input"></td>
              </tr> 
              <tr class="btr">
                <td>3</td>
                <td><input type="text" v-model.number="length3" class="custom-input"></td>
                <td><input type="text" v-model.number="outerMax3" class="custom-input"></td>
                <td><input type="text" v-model.number="outerMin3" class="custom-input"></td>
                <td><input type="text" v-model.number="wallThick3" class="custom-input"></td>
                <td><input type="text" v-model.number="initDefect3" class="custom-input"></td>
              </tr>
              <tr class="btr">
                <td>平均值</td>
                <td><input type="text" v-model.number="avelength" class="custom-input"></td>
                <td><input type="text" v-model.number="aveoutermax" class="custom-input"></td>
                <td><input type="text" v-model.number="aveoutermin" class="custom-input"></td>
                <td><input type="text" v-model.number="avewallthick" class="custom-input"></td>
                <td><input type="text" v-model.number="aveinitdefect" class="custom-input"></td>
              </tr>
          </table>
          <div class="tip flex-row">
              Tips:<br>
              &nbsp;&nbsp;&nbsp;&nbsp;长度范围：127.6~128.0<br>
              &nbsp;&nbsp;&nbsp;&nbsp;平均外径：52.5~52.8<br>
              &nbsp;&nbsp;&nbsp;&nbsp;壁厚：0.24~0.26<br>
              &nbsp;&nbsp;&nbsp;&nbsp;初始缺陷：0.01~0.05<br>
          </div>
      </div>
      <div class="bottom-button flex-row">
        <div class="button1 button-font flex-row" @click="getStudents">小组更新</div>
        <div class="button2 button-font flex-row" @click="confirm">确认</div>
        <div class="button3 button-font flex-row" @click="finish">结束实验</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tip {
  width: 300px;
  height: 245px;
  color: black;
  font-size: 20px;
}
.page {
  width: 100%;
  height: 100%;
}
.flex-row {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top {
  width: 100%;
  height: 486px;
}
.bottom {
  width: 100%;
  height: 539px;
}
.top-left {
  width: 534px;
  height: 400px;
  margin-top: 75px;
  margin-left: 186px;
  margin-bottom: 11px;
}
.top-right {
  width: 570px;
  height: 400px;
  margin-top: 75px;
  margin-bottom: 11px;
}
table {
    width: 534px;
    height: 400px;
    border-collapse:collapse; /* 边框模式 */
}

tr {
  height: 57px;
}

td {
  border: 1px solid #808080;
  color: black;
  width: 178px;
  height: 57px;
  font-size: 30px;
  text-align: center;
  justify-content: center;
}
.th-style {
  font-size: 36px;
  background-color: rgb(232,232,232);
}
.top-right1 {
  width: 235px;
  height: 35px;
  color: black;
  font-size: 28px;
  font-weight: bold;
}
.circle-number {
  display: inline;
  width: 25px; /* 圆的宽度 */
  height: 25px; /* 圆的高度 */
  border-radius: 50%; /* 使用边框半径使其变为圆形 */
  background-color:white; /* 圆的背景颜色 */
  color:black; /* 文字颜色 */
  text-align: center; /* 文字水平居中对齐 */
  line-height: 25px; /* 文字垂直居中对齐 */
  font-size: 16px; /* 文字大小 */
  border: 1px solid black;
}
.top-right2 {
  width: 380px;
  height: 83px;
  margin-top: 52px;
}
.top-right3 {
  width: 380px;
  height: 66px;
}
.top-right4 {
  width: 380px;
  height: 64px;
}
.top-right-font {
  font-size: 20px;
  color: black;
}
.bottom-table{
  width: 872px;
  height: 245px;
  margin-left: 104px;
}
.bt {
  width: 572px;
  height: 245px;
    border-collapse:collapse; /* 边框模式 */
}

.btr {
  height: 49px; 
}

.btr>td {
  border: 1px solid #808080;
  color: black;
  width: 95px;
  height: 49px;
  font-size: 22px;
  text-align: center;
  justify-content: center;
}
.bottom-button {
  width: 100%;
  height: 125px;
}
.button1 {
  margin-left: 50px;
}
.button2 {
  margin-left: 288px;
}
.button3 {
  margin-left: 255px;
}
.button-font {
  font-size: 20px;
  color: black;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #808080;
  width: 124px;
  height: 55px;
  margin-top: 36px;
}
.custom-input {
      border: none; /* 去除边框 */
      outline: none; /* 去除轮廓 */
      /* padding: 5px; 添加内边距，以改善外观 */
      /* margin: 2px; 添加一些间距 */
      width: 60px;
      height: 41px;
      font-size: 20px;
      text-align: center;
      font-family: Microsoft Yahei;
      display: inline-block; /* 让输入框在一行显示 */
}
</style>
